<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../../css/public.css">
</head>

<body>
	<div class="situation-content">
		<div class="main">
			<div class="user-img"></div>
			<strong class="situation-now">告诉我们一些您的情况，老师会更了解你，课程会更顺利地进行</strong>
			<!-- 母语 -->
			<div class="box-second">
				<div class="tes">
					<div class="ipts" style="display: flex;width: 100%;align-items: center;">
						<strong class="title">母语</strong>
						<div style="width: 80%;">
							<div class="select-custom">
								<strong class="nr" id="content">English</strong>
								<i class="iconfont icon-xiang-zuo ic-select" id="ele"></i>
							</div>
						</div>
					</div>
					<div class="items" id="first" style="align-self: flex-end;margin-top: 10px;">
						<strong class="items-btm">English</strong>
						<strong class="items-btm">Japanese</strong>
						<strong class="items-btm">Korean</strong>
						<strong class="items-btm">thai</strong>
						<strong class="items-btm">世界各国</strong>
					</div>
				</div>

				<!-- 添加更多 -->
				<div class="select-group">
					<div class="select-width">
						<div class="flex-sel">
							<div class="ipts">
								<div class="select-custom">
								</div>
							</div>
						</div>
						<div class="items">
							<strong class="items-btm">English</strong>
							<strong class="items-btm">Japanese</strong>
							<strong class="items-btm">Korean</strong>
							<strong class="items-btm">thai</strong>
							<strong class="items-btm">世界各国</strong>
						</div>
					</div>



					<!-- 目前水平 -->
					<div class="tes">
						<div class="now-situation" style="display: flex;width: 100%;align-items: center;">
							<strong class="title">目前水平</strong>
							<div style="width: 80%;">
								<div class="select-custom">
									<strong class="nr" id="now-situation">零基础</strong>
									<i class="iconfont icon-xiang-zuo ic-select" id="now"></i>
								</div>
							</div>
						</div>
						<div class="items" id="second" style="align-self: flex-end;margin-top: 10px;">
							<strong class="items-now">精通</strong>
							<strong class="items-now">高级</strong>
							<strong class="items-now">HSK6级</strong>
							<strong class="items-now">HSK5级</strong>
							<strong class="items-now">HSK4级</strong>
							<strong class="items-now">HSK3级</strong>
							<strong class="items-now">HSK2级</strong>
							<strong class="items-now">HSK1级</strong>
							<strong class="items-now">零基础</strong>
						</div>
					</div>
					<!-- 目前水平 -->

					<!-- 学习经历 -->
					<!-- <div class="tes">
							<div class="experience" style="display: flex;width: 100%;align-items: center;">
								<strong class="title">学习经历</strong>
								<div style="width: 80%;">
									<div class="select-custom">
											 <strong class="nr" id="experience">test</strong>
											 <i class="iconfont icon-xiang-zuo ic-select" id="test"></i>
									</div>
								</div>
							</div>
							<div class="items" id="third" style="align-self: flex-end;margin-top: 10px;">
									 <strong class="items-experience">1</strong>
									 <strong class="items-experience">2</strong>
									 <strong class="items-experience">3</strong>
									 <strong class="items-experience">4</strong>
							</div>
						</div> -->
					<div class="tes">
						<div style="display: flex;width: 100%;align-items: center;">
							<strong class="title">学习目标</strong>
							<div style="width: 80%;">
								<textarea rows="" cols="" placeholder="工作，教育，爱好，旅行，亲戚朋友" class="areas"
									id="purpose"></textarea>
							</div>
						</div>
					</div>
					<!-- 学习目标 -->
					<div class="tes">
						<div style="display: flex;width: 100%;align-items: center;">
							<strong class="title">学习经历</strong>
							<div style="width: 80%;">
								<textarea rows="" cols="" placeholder="具体情况,学了几年&#10留过学吗&#10用过什么教材" class="areas"
									id="experiencelok"></textarea>
							</div>
						</div>
					</div>
					<div class="tes">
						<div style="display: flex;width: 100%;align-items: center;">
							<strong class="title">使用教材</strong>
							<div style="width: 80%;">
								<textarea rows="" cols="" id='book' class="areas"></textarea>
							</div>
						</div>
					</div>
					<div class="tes">
						<div style="display: flex;width: 100%;align-items: center;">
							<strong class="title">其他</strong>
							<div style="width: 80%;">
								<textarea rows="" cols="" id="else" class="areas"></textarea>
							</div>
						</div>
					</div>
					<button type="button" class="btn">完成，谢谢</button>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
<script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/public.js"></script>
<script src="/js/dream-msg.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	// 设置默认头像
	$('.user-img').css('background-image', `url(/static/defaultavatar.png)`)

	// 页头生成
	productheader('body', 3);
	// 生成页尾
	productfooter('body', 4);

	$(".select-lang").css("width", "95px");
	// 下拉框
	// 隐藏多余东西
	$('.title-bar').hide();
	$('.left-bar').hide();

	// 选择框切换
	$('.ipts').click(function () {
		change('first', 'ele');
	})
	$('.now-situation').click(function () {
		change('second', 'now');
	})
	$('.experience').click(function () {
		change('third', 'test');
	})
	// 选择框切换

	// 选择项取值
	$('.items-btm').each(function () {
		$(this).click(function () {
			$("#content").html($(this).html());
			$('#ele').removeClass('ic-select-active');
			$('#ele').addClass('ic-select');
			$('#first').slideToggle("slow");
		})
	})

	$('.items-now').each(function () {
		$(this).click(function () {
			$("#now-situation").html($(this).html());
			$('#now').removeClass('ic-select-active');
			$('#now').addClass('ic-select');
			$('#second').slideToggle("slow");
		})
	})
	$('.items-experience').each(function () {
		$(this).click(function () {
			$("#experience").html($(this).html());
			$('#test').removeClass('ic-select-active');
			$('#test').addClass('ic-select');
			$('#third').slideToggle("slow");
		})
	})


	// 选择项取值

	// 设置选择框隐藏
	$(function () {
		$('.items').hide();
	})
	// 设置选择框隐藏


	// 切换
	function change(area, icon) {
		if ($('#' + icon).hasClass('ic-select-active')) {
			$('#' + icon).removeClass('ic-select-active');
			$('#' + icon).addClass('ic-select');
			$('#' + area).slideToggle("slow");
		} else {
			$('#' + icon).removeClass('ic-select');
			$('#' + icon).addClass('ic-select-active');
			$('#' + area).slideToggle("slow");
		}
	}
	//取值
	// 设置输入框切换


	// 接口提交

	$('.btn').click(async function () {
		if (!$('#purpose').val()) {
			Dreamer.warning('请填写学习目标!', 2000);
		} else {
			let params = {
				language: $('#content').html(),
				level: $('#now-situation').html(),
				experience: $('#experiencelok').val(),
				learningobjectives: $('#purpose').val(),
				teachingmaterial: $('#book').val(),
				other: $('#else').val() || '',
			}
			let res = await ajax('learning_objectives_add', params, 'post');
			if (res.code == 200) {
				Dreamer.info('提交成功', 500);
				setTimeout(() => {

					// 直接快捷登录
					publicLogin()

				}, 500)
			} else {
				Dreamer.error('提交失败', 2000);
			}
		}


	})

</script>
<style type="text/css">
	html,
	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.content-sit {
		display: flex;
		align-items: center;
		height: 80%;
		padding-right: 20px;
		border-right: 2px solid #EBEBEB;
	}

	.situation-content {
		width: 100%;
		padding: 3% 0 5% 0;
		background-color: #EDEFF0;
	}

	.main {
		margin: auto;
		width: 25%;
		height: auto;
		border-radius: 6px;
		background-color: #fff;
		padding: 10px 5% 0 5%;
	}

	.user-img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		padding: 5px;
		/* border: 1px solid #e7e4e4; */
		background: no-repeat center;
		background-size: 100% 100%;
	}

	.situation-now {
		width: 100%;
		display: block;
		margin-top: 10px;
		color: #3C3C3C;
		font-size: 14px;
		line-height: 16px;
		padding-bottom: 20px;
	}

	.select-custom {
		width: 240px;
		background-color: #F2F2F2;
		border-radius: 6px;
		display: flex;
		align-items: center;
		margin-left: 10px;
		position: relative;
	}

	.areas {
		outline: none;
		margin-left: 10px;
		box-sizing: border-box;
		width: 240px;
		height: 60px;
		background-color: #F2F2F2;
		border-radius: 4px;
		border: none;
		padding: 6px;
		resize: none;
		overflow-y: hidden;
	}

	.tes {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 10px;
	}

	.title {
		width: 60px;
		text-align: right;
		white-space: nowrap;
	}

	.items {
		width: 240px;
		background-color: #F2F2F2;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nr {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 8px 0;
		color: #a5a5a5;
	}

	.items-btm {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 8px 0;
		border-bottom: 1px solid #E6E6E6;
		color: #a5a5a5;
		cursor: pointer;
	}

	.items-now {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 8px 0;
		border-bottom: 1px solid #E6E6E6;
		color: #a5a5a5;
		cursor: pointer;
	}

	.items-experience {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 8px 0;
		border-bottom: 1px solid #E6E6E6;
		color: #a5a5a5;
		cursor: pointer;
	}

	.ic-select {
		display: flex;
		justify-content: center;
		margin-left: 9px;
		font-size: 30px;
		color: #BDBDBD;
		transform: rotate(270deg) scale(0.6);
		position: absolute;
		right: 0px;
		transition: transform 0.5s ease-in;
	}

	.ic-select-active {
		display: flex;
		justify-content: center;
		margin-left: 9px;
		font-size: 30px;
		color: #BDBDBD;
		transform: rotate(450deg) scale(0.6);
		position: absolute;
		right: 0px;
		transition: transform 0.5s ease-in;
	}

	select {
		width: 80%;
		margin-left: 10px;
	}

	strong {
		display: block;
		font-weight: bold;
		font-size: 14px;
		color: #a2a2a2;

	}

	.label-name strong {
		padding-top: 10px;
		width: 60px;
		text-align: right;
	}

	.box-second {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		color: #3C3C3C;
		line-height: 16px;
		padding-top: 10px;
		margin-right: 5%;
		padding-bottom: 40px;

	}

	.textarea-ipt {
		background-color: #F2F2F2;
		border-radius: 6px;
	}

	.btn {
		color: #fff;
		margin-top: 40px;
		display: block;
		width: 70%;
		padding: 10px 0;
		background-color: #2073D4;
		color: #fff;
		font-size: 14px;
		line-height: 16px;
		border-radius: 6px;
		border: none;
	}

	textarea::-webkit-input-placeholder {
		/* placeholder颜色  */
		color: #868A8E;
		/* placeholder字体大小  */
		font-size: 12px;
		transform: scale(0.95);
		font-weight: bold;
		/* placeholder位置  */
	}
</style>